<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title> Sliding Captions 갤러리 </title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<style type="text/css">


body {
	margin:20px auto;
	padding:0;	
	width: 620px;
	background:#192839;
}
.thumbs {
   width:100px;	
   float:left;
}
.thumbs img {
	border:solid 1px #ccc;
	padding:5px;
	margin-bottom:3px;
}
.thumbs img:hover {
	border-color: #EF4018;
}

#largeImg {
	border:solid 1px #ccc;
	width: 500px;
	height: 280px;
	padding:5px;
    margin-left:110px;
	overflow:hidden;
	
}

#caption { background:url(captionBg.png) repeat-y; 
           border:#CCC 1px thin; 
		   padding:10px;
		   position:relative;
		   color:#FFFFFF; }
		   

</style>
</head>

<body>

<div class="thumbs">
  
    	<a href="images/pic1.jpg" title="image1"><img src="images/th_pic1.jpg" /></a>
        <em>Lorem Ipsum is simply dummy text of the pdrinting and typesetting industry.</em>
   
    
        <a href="images/pic2.jpg" title="image2"><img src="images/th_pic2.jpg" /></a>
        <em> Lorem Ipsum is simply dummy tely dummy thely dummy tegxt of thely try.
             Sed facilisis, sem a luctus bibendum, dui risus pellentesque velit, quis tempor magna 
            sem vel justo. Etiam eget ipsum ante. </em>     
     
       	<a href="images/pic3.jpg" title="image3"><img src="images/th_pic3.jpg" /></a>
       	<em> Lorem Ipsum is simply dummy.</em>
     
</div>
    
<div id="largeImg"><img src="images/pic1.jpg" alt="image1" /></div>


<!---------- jQuery code Start ---------->
<script>


	
</script>
</body>
</html>
